{% extends "云商/template.html" %}
{% block title %}{% endblock %}
{% block css %}
<style>
    .demo-reg-container {
        width: 520px;
        margin: 21px auto 0;
    }

    .demo-reg-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }
</style>

{% endblock %}
{% block body %}

<div class="layui-tab Yy-pd-lr-5B" lay-filter="test-hash">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="11">登录</li>
        <li lay-id="22">注册</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form">
                <div class="demo-reg-container">
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-email"></i>
                                    </div>
                                    <input type="text" name="login" value="" lay-verify="required|email"
                                        placeholder="请填写邮箱" lay-reqtext="请填写邮箱" autocomplete="off"
                                        class="layui-input Femail" id="login-login">
                                </div>
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 11px;">
                                    <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary"
                                        lay-on="login-get-vercode" id="login-get-vercode">获取验证码</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-vercode"></i>
                            </div>
                            <input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码"
                                lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="password" value="" lay-verify="required" placeholder="密码"
                                autocomplete="off" class="layui-input" id="login-password" lay-affix="eye">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
                        <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
                            <ins>用户协议</ins>
                        </a>
                    </div>

                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
                            lay-filter="demo-reg">登录</button>
                    </div>
                    <div class="layui-form-item demo-reg-other">
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form">
                <div class="demo-reg-container">
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-email"></i>
                                    </div>
                                    <input type="text" name="email" value="" lay-verify="required|email"
                                        placeholder="邮箱" lay-reqtext="请填写邮箱" autocomplete="off" class="layui-input"
                                        id="reg-email">
                                </div>
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 11px;">
                                    <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary"
                                        lay-on="reg-get-vercode" id="reg-get-vercode">获取验证码</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-vercode"></i>
                            </div>
                            <input type="text" name="vercode1" value="" lay-verify="required" placeholder="验证码"
                                lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="password" value="" lay-verify="required" placeholder="密码"
                                autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword"
                                placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
                        <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
                            <ins>用户协议</ins>
                        </a>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-primary  layui-btn-fluid" lay-submit
                            lay-filter="reg-btn">注册</button>
                    </div>
                    <div class="layui-form-item demo-reg-other">

                    </div>
                </div>
            </form>
        </div>

    </div>
</div>


{% endblock %}
{% block js %}


<script>
    // 60秒按钮
    function BtnDist(DocName) {
        $(DocName).addClass('layui-btn-disabled').attr('disabled', true);
        var time = 60;
        var interval = setInterval(function () {
            time--;
            $(DocName).html(time + '秒后重新获取');
            if (time < 0) {
                clearInterval(interval);
                $(DocName).removeClass('layui-btn-disabled').attr('disabled', false).html('重新获取验证码');
            }
        }, 1000);

    }
</script>
{% include "云商/include/AjAx之Loading.html" %}
<script>
    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var element = layui.element;
        var hashName = 'tabid'; // hash 名称
        var layid = location.hash.replace(new RegExp('^#' + hashName + '='), ''); // 获取 lay-id 值

        // 初始切换
        element.tabChange('test-hash', layid);
        // 切换事件
        element.on('tab(test-hash)', function (obj) {
            location.hash = hashName + '=' + this.getAttribute('lay-id');
        });

        // 自定义验证规则
        form.verify({
            // 确认密码
            confirmPassword: function (value, item) {
                var passwordValue = $('#reg-password').val();
                if (value !== passwordValue) {
                    return '两次密码输入不一致';
                }
            }
        });

        // 提交事件: 登录
        form.on('submit(demo-reg)', function (data) {
            var field = data.field; // 获取表单字段值

            // 是否勾选同意
            if (!field.agreement) {
                layer.msg('您必须勾选同意用户协议才能登录');
                return false;
            }

            // 显示填写结果，仅作演示用
            // layer.alert(JSON.stringify(field), {
            //     title: '当前填写的字段值'
            // });
            let user_email = $('#login-login').val().trim();
            let user_password = $('#login-password').val().trim();
            let user_code = $('input[name="vercode"]').val().trim();
            axios({
                url: '/api/CloudShop/create/user/',
                method: 'POST',
                data: {
                    "user_email": user_email,
                    "user_password": user_password,
                    "user_code": user_code
                }
            }).then(res => {
                // layer.msg(res.data.msg + ', 正在为你跳转...');
                YySetLocatStorge(undefined, res.data.data)
                // /web/CloudShop/index/
                setTimeout(() => {
                    YyGo('/web/CloudShop/index/')
                }, 1200);
            }).catch(err => {
                // layer.msg(err.response.data.msg)
            })

            return false; // 阻止默认 form 跳转
        });
         // 提交事件: 注册
         form.on('submit(reg-btn)', function (data) {
            var field = data.field; // 获取表单字段值

            // 是否勾选同意
            if (!field.agreement) {
                layer.msg('您必须勾选同意用户协议才能登录');
                return false;
            }

            // 显示填写结果，仅作演示用
            // layer.alert(JSON.stringify(field), {
            //     title: '当前填写的字段值'
            // });
            let user_email = $('#reg-email').val().trim();
            let user_password = $('#reg-password').val().trim();
            let user_code = $('input[name="vercode1"]').val().trim();
            
            axios({
                url: '/api/CloudShop/create/user/',
                method: 'POST',
                data: {
                    "user_email": user_email,
                    "user_password": user_password,
                    "user_code": user_code
                }
            }).then(res => {
                layer.msg(res.data.msg + ', 正在为你跳转...');
                YySetLocatStorge(undefined, res.data.data)
                // /web/CloudShop/index/
                setTimeout(() => {
                    YyGo('/web/CloudShop/index/')
                }, 1200);
            }).catch(err => {
                layer.msg(err.response.data.msg)
            })

            return false; // 阻止默认 form 跳转
        });
 
        // 普通事件
        util.on('lay-on', {
            // 获取验证码
            'reg-get-vercode': function (othis) {
                var isvalid = form.validate('#reg-email'); // 主动触发验证，v2.7.0 新增 
                // 验证通过
                if (isvalid) {
                    // layer.msg('注册邮箱规则验证通过');
                    // 此处可继续书写「发送验证码」等后续逻辑
                    // …
                    BtnDist('#reg-get-vercode')
                    axios({
                        url: '/api/CloudShop/tools/send_code/',
                        method: 'POST',
                        data: {
                            "user_email": $('#reg-email').val()
                        }
                    }).then(res => {
                        console.log(res);
                    }).catch(err => {
                        console.log(err);
                    })
                }
            },
            'login-get-vercode': function (othis) {
                var isvalid = form.validate('#login-login'); // 主动触发验证，v2.7.0 新增 
                // 验证通过
                if (isvalid) {
                    BtnDist('#login-get-vercode')
                    axios({
                        url: '/api/CloudShop/tools/send_code/',
                        method: 'POST',
                        data: {
                            "user_email": $('#login-login').val().trim()
                        }
                    }).then(res => {
                        console.log(res);
                        layer.msg('验证码发送成功');
                    }).catch(err => {
                        console.log(err);
                        layer.msg('验证码发送失败');
                    })
                }
            },
        });
    });
</script>

{% endblock %}